<template>
    <div class="message-board bgc" v-loading="loading">
        <p class="title tl">共<i> {{ viewData.comment | getCommentNum }} </i>条留言 - <span class="time">最近更新{{ new Date(viewData.createTime).getTime() | timeFilter }}</span></p>
        <div class="comment">
            <comment-tree :data="viewData.comment" @submit="onCommentSubmit" ref="commentForm"></comment-tree>
        </div>
    </div>
</template>
<script>
import CommentTree from '@/components/Comment'
/**
 * 递归实现树形结构
 * @param {*} data 需要递归的数组
 * @param {*} parentViewCode 递归条件
 */
export function filterTreeData (data, parentId = null) {
    const tree = []
    let temp
    for (let i = 0; i < data.length; i++) {
        if (data[i].parentId === parentId) {
            const obj = data[i]
            temp = filterTreeData(data, data[i].id)
            if (temp.length > 0) {
                obj.children = temp
            }
            tree.push(obj)
        }
    }
    return tree
}
export default {
    name: 'articleView',
    components: {
        CommentTree
    },
    head () {
        return {
            title: this.title,
            meta: [
                { charset: 'utf-8' },
                { name: 'viewport', content: 'width=device-width, initial-scale=1' },
                { hid: '博客详情', name: 'articleView', content: '博客详情' }
            ]
        }
    },
    data () {
        return {
            viewData: {
            },
            title: '',
            loading: true
        }
    },
    // asyncData({isDev, route, store, env, params, query, req, res, redirect, error}) {

    // },
    async asyncData ({ app, query }) {
        let res = await app.$api.comment.board({ pageSize: 100 })
        if (res && res.success) {
            let data = res.data[0] || []
            return {
                viewData: {
                    comment: filterTreeData(data, null),
                    createTime: data[0] ? data[0].createTime : new Date()
                },
                loading: false
            }
        }
    },
    methods: {
        onCommentSubmit (data) {
            this.$api.comment.addBoard({ ...data }).then(async res => {
                let resData = await this.$api.comment.board({ pageSize: 100 })
                this.$message.success(res.data)
                this.$refs.commentForm.reset()
                let data = resData.data[0] || []
                this.viewData = {
                    comment: filterTreeData(data, null),
                    createTime: data[0] ? data[0].createTime : new Date()
                }
            }).catch(err => {
                console.log(err)
            })
        }
    }
}
</script>
<style lang="less" scpoed>
    .message-board {
        width: 100%;
        background: @bg;
        border-radius: @border-radius;
        overflow: hidden;
        .comment {
            padding: 20px;
            .comment-form {
                width: 100%;
            }
        }
        .title {
            padding: 0 20px;
            font-size: 18px;
            line-height: 50px;
            background-color: @c-e8;
            // border-bottom: 1px solid @c-ccc;
            i {
                font-weight: bold;
            }
            .time {
                color: @c-999;
            }
        }
    }
</style>
